<template>
    <van-nav-bar title="我的收藏" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="collect">
        <van-swipe-cell v-for="item, index in conlist.data">
            <van-card :price="item.price" :desc="item.text" :title="item.name" class="goods-card" :thumb="item.img" />
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="addBtn(index)" />
            </template>
        </van-swipe-cell>
    </div>
</template>
<script lang="ts" setup>
import { showToast } from 'vant';
import { ref, onUpdated, reactive } from 'vue';
import { collectList, removeCollect } from '../../request';
import { showSuccessToast, showFailToast } from 'vant';
const addBtn = (index: any) => {
    removeCollect({ collect_id: conlist.data[index].id }).then(content => {
        collect();
        showSuccessToast("删除成功")
    })
}

let conlist: any = reactive({
    data: []
})
const collect = () => {
    collectList().then((content: any) => {
        let { result } = content;
        if (result.length == 0) {
            showFailToast("收藏空空如也")
        }
        let hot = result.map((item: any) => {
            let obj: any = {};
            obj.id = item.collect_id;
            obj.name = item.collect_name;
            obj.img = item.collect_img;
            obj.text = item.collect_text;
            obj.price = item.collect_price;
            return obj
        })
        conlist.data = hot;
    })
}
collect()




const onClickLeft = () => history.back();

</script>



<style lang="scss" >
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.collect {
    width: 100%;
    height: 800px;
    background-color: #f8f8f8;



    .goods-card {
        // margin: 0;
        width: 95%;
        margin: .68rem auto .5333rem;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);
    }

    .delete-button {
        height: 100%;
    }

    .van-card__title {
        font-size: 15.5px;
        margin-top: .6333rem;
    }

    .van-card__desc {
        margin-top: .5rem;
    }
}
</style>